<template>
	<div class="item_bg">
		<div class="img_bg">
      <img class="" src="http://image.utea88.com/statics/pc_newHome_bg_02.png" alt="">
      <div :class="[isActive ? 'animation1' : '', 'img_section']">
        <div class="white_bg"></div>
        <div class="main_section">
          <div class="app_logo">
            <img class="" src="http://image.utea88.com/statics/pc_newHome_item_appLogo.png" alt="">
          </div>
          <div class="text_bg">
            <div class="app_text">众茶通</div>
            <div class="detail_text_bg">
              <div class="detail_text">中国目前唯一自主研发软件系统的垂直茶行业B2B交易平台</div>
              <div class="detail_text">面向S端、B端、C端分别提供PC、APP、小程序、微商城、直播等线上交易服务</div>
            </div>
            <div class="btn_bg">
              <div class="btn1">众茶通</div>
              <div class="btn2">众茶仓</div>
            </div>
          </div>
        </div>
      </div>
      <div :class="[isActive ? 'animation2' : '', 'big_title']">自研应用程序</div>
    </div>
	</div>
</template>

<script>

	export default {
    name: '',
    props: {
      activeIndex: {
        default: '',
        type: Number,
      },
    },
		components: {
			
		},
    watch: {
      activeIndex(newValue, oldValue) {
        if (newValue == this.index) {
          this.isActive = true
        } else {
          this.isActive = false
        }
      }
    },
		data() {
			return {
        index: 1,
        isActive: false,
			}
		},
		methods: {
			
  	},
    mounted(){
      
    }
	}
</script>

<style scoped lang="scss">
  .item_bg {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .img_bg {
    width: 100%;
    height: 100%;

    img {
      width: 100%;
      height: 100%;
    }

    .img_section {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      height: 679px;

      .white_bg {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 442px;
        background: rgba($color: white, $alpha: 0.8);
      }

      .main_section {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 1060px;
        height: 572px;

        .app_logo {
          position: absolute;
          top: 0;
          left: 0;
          width: 262px;
          height: 572px;
           
          img {
            width: 100%;
            height: 100%;
          }
        }

        .text_bg {
          position: absolute;
          top: 267px;
          left: 355px;
          right: 0;
          bottom: 0;

          .app_text {
            height: 70px;
            opacity: 1;
            /** 文本1 */
            font-size: 48px;
            font-weight: 700;
            letter-spacing: 0px;
            line-height: 70px;
            color: rgba(0, 0, 0, 1);
            text-align: left;
            vertical-align: top;
          }

          .detail_text_bg {
            margin-top: 10px;
            height: 96px;

            .detail_text {
              height: 48px;
              opacity: 1;
              /** 文本1 */
              font-size: 20px;
              font-weight: 400;
              letter-spacing: 0px;
              line-height: 48px;
              color: rgba(0, 0, 0, 1);
              text-align: left;
              vertical-align: top;
            }
          }

          .btn_bg {
            margin-top: 40px;
            display: flex;
            height: 60px;
          }

          .btn1 {
            width: 130px;
            height: 60px;
            background: rgb(15, 131, 193);
            font-size: 24px;
            font-weight: 700;
            letter-spacing: 0px;
            line-height: 60px;
            color: rgba(255, 255, 255, 1);
            text-align: center;
            vertical-align: top;
          }

          .btn2 {
            margin-left: 30px;
            width: 130px;
            height: 60px;
            font-size: 24px;
            font-weight: 700;
            letter-spacing: 0px;
            line-height: 60px;
            color: rgb(15, 131, 193);
            border: 2px solid rgb(15, 131, 193);
            text-align: center;
            vertical-align: top;
          }
        }
      }
    }

    .big_title {
      position: absolute;
      top: 0;
      left: calc((50% - (462px) / 2) + 50px);

      width: 462px;
      height: 105px;
      opacity: 1;
      /** 文本1 */
      font-size: 72px;
      font-weight: 700;
      letter-spacing: 5px;
      line-height: 105px;
      color: rgba(255, 255, 255, 1);
      text-align: left;
      vertical-align: top;

    }

    .animation1 {
      top: calc(100% - 679px);
      animation: move 0.5s linear;
    }

    .animation2 {
      top: calc((50% - (105px) / 2) - 100px);
      animation: move2 0.5s linear;
    }
  }

  @keyframes move {
    0% {
      top: 100%;
    }

    100% {
      top: calc(100% - 679px);
    }
  }

  @keyframes move2 {
    0% {
      top: 0;
    }

    100% {
      top: calc((50% - (105px) / 2) - 100px);
    }
  }
</style>
